<template>
  <div>
    <v-app-bar app>
      <v-progress-linear
              :active="pageLoading"
              :indeterminate="pageLoading"
              absolute
              top
              color="deep-purple accent-4"
      ></v-progress-linear>

      <v-toolbar-title class="headline text-uppercase">
        <span class="font-weight-light">Assignments</span>
      </v-toolbar-title>
      <v-spacer/>
      <v-toolbar-items>
        <v-btn v-for="r of routes" :to="r.link" :key="r.name" text>{{r.name}}</v-btn>
      </v-toolbar-items>
      <v-spacer/>
      <v-toolbar-items>
        <v-menu
          left
          bottom
        >
          <template v-slot:activator="{ on }">
            <v-btn text v-on="on">
              {{username}} <v-icon>mdi-chevron-down</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item v-ripple to="/home">
              <v-list-item-title>Profile</v-list-item-title>
            </v-list-item>
            <v-divider/>
            <v-list-item v-ripple @click="handleLogout">
              <v-list-item-title>Logout</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-app-bar>

    <v-content>
      <router-view/>
    </v-content>
  </div>
</template>

<script>

  export default {
    name: 'layout',
    components: {

    },
    data: () => ({
      routes: [
        { name: 'blog', link: '/blog' },
        { name: 'book', link: '/book' },
        { name: 'doc', link: '/doc' },
        { name: 'stock', link: '/stock' },
        { name: 'card', link: '/card' },
        { name: 'aqi', link: '/aqi' },
        { name: 'member', link: '/member' },
        { name: 'forum', link: '/forum' },
      ]
    }),
    methods: {
      handleLogout() {
        this.$store.dispatch('user/logout').then(() => {
          this.$toasted.info('Logout successfully');
          this.$router.push('/login');
        })
      }
    },
    computed: {
      title() {
        return this.$store.getters.title;
      },
      username() {
        return this.$store.getters.username;
      },
      pageLoading() {
        return this.$store.getters.pageLoading;
      }
    },
    created() {
      if (this.$store.getters.token && !this.$store.getters.username) {
        this.$store.dispatch('user/getUser').then(res => {
          if (res.suspended) this.$router.push("/login");
        }).catch(err => {
          this.$toasted.error(err);
        })
      }
    }
  };
</script>
